<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设备返奖</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<link rel="stylesheet" href="../css/timecheck.css" />
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
		</script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				height: 100%;
			}
			
			.main-head {
				padding: 0.4rem 0 0.3rem;
				text-align: center;
				background-color: #FFFFFF;
			}
			
			.time {
				color: #000000;
			}
			
			.matchine-name {
				font-size: 0.36rem;
				font-weight: bold;
				color: #ff6600;
			}
			
			.flex {
				display: flex;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.macthine-sale-info {
				text-align: center;
				width: 60%;
				font-size: 0.24rem;
				margin: 0 auto;
				margin-top: 0.22rem;
			}
			/**/
			
			.code-table {
				padding: 0.2rem 0 0.1rem;
				text-align: center;
				background-color: #FFFFFF;
				color: #000000;
				margin-top: 2px;
			}
			
			.code-item p {
				color: #000000;
			}
			
			.code-item p:nth-of-type(1) {
				margin-top: 0.1rem;
			}
			
			.code-item:nth-of-type(1) {
				border-right: 1px solid #C0C0C0;
			}
			/**/
			
			.goods-item-box {
				padding: 0.1rem 0;
				background-color: #FFF;
				margin-top: 1px;
			}
			
			.img-box {
				flex: 3;
				text-align: center;
			}
			
			.img-box img {
				height: 1.5rem;
				vertical-align: middle;
			}
			
			.info-box {
				flex: 7;
			}
			
			.info-box p {
				color: #0D0D0D;
			}
			.info-box p:nth-last-of-type(1){
				margin-top: 0.1rem;
			}
			.info-box p:nth-of-type(2),
			.info-box p:nth-of-type(3) {
				font-size: 0.24rem;
				margin: 0.01rem 0;
			}
			
			.info-box p:nth-of-type(3) span {
				float: right;
				margin-right: 0.2rem;
			}
			/**/
			
			.total-info {
				margin-top: 0.04rem;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 0.22rem;
				line-height: 0.45rem;
			}
		</style>
	</head>

	<body>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
		<div id="app" class="mui-content">
			<div class="main-head">
				<p class="time">{{fromDate}} 至 {{toDate}}</p>
				<p class="matchine-name">{{totalData.deviceName}}-{{totalData.deviceStoreNumber}}号机</p>
				<div class="flex macthine-sale-info">
					<div class="flex-item">售价：{{totalData.count?(totalData.income/totalData.count/100).toFixed(2):'--'}}</div>
					<div class="flex-item">返奖率：{{totalData.income?(totalData.prize/totalData.income*100).toFixed(2)+'%':'--'}}</div>
				</div>
			</div>
			<div class="total-info flex">
				<div class="flex-item"><span class="iconfont icon-iconstoreddetailcompass"></span>{{storeName}}</div>
				<div class="flex-item">SN：{{totalData.deviceSn}}</div>
			</div>
			<!---->
			<div class="flex code-table">
				<div class="flex-item code-item">
					<p>投币码表</p>
					<p>{{totalData.coinCodeTable}}</p>
				</div>
				<div class="flex-item code-item">
					<p>返奖码表</p>
					<p>{{totalData.prizeCodetable}}</p>
				</div>
			</div>
			<div class="division flex">
				<div class="line"><span></span></div>
				<div class="division-word">
					奖品清单
				</div>
				<div class="line"><span></span></div>
			</div>
			<!---->
			<div class="goods-item-box flex" v-for="(item,index) in totalData.goods" :key="index">
				<div class="img-box">
					<img :src="config.imgPath+item.cutImg" alt="" />
				</div>
				<div class="info-box">
					<p>{{item.goodsName}}（{{item.goodsId}}）</p>
					<p>库存单价：{{(item.goodsPrice/100).toFixed(2)}}</p>
					<p>机台余量：{{item.surplus}} <span>返奖数量：{{item.count}}</span></p>
				</div>
			</div>
			<!---->
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data: function() {
					return { 
						deviceId: '',
						fromDate: '',
						toDate: '',
						storeName: '',
						totalData: {
							deviceName: '',
							deviceStoreNumber: '--',
							deviceNote: '',
							storeName: '',
							income: 0,
							prize: 0,
							count: 0,
							goods: []
						}
					}
				},
				created: function() {
					mui.init()
					var vm = this;
					mui.plusReady(function() {
						vm.receiveParams()
						vm.loadData()
					})
				},
				methods: {
					receiveParams: function() {
						var sf = plus.webview.currentWebview()
						this.deviceId = sf.deviceId
						this.fromDate = sf.fromDate
						this.toDate = sf.toDate
						this.storeName = sf.storeName
					},
					loadData: function() {
						var vm = this
						config.ajax({
							url: '/phone/devicePrize',
							data: {
								fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
								toDate: new Date(vm.toDate).format('yyyyMMdd'),
								deviceId: vm.deviceId
							},
							success: function(res) {
								if(res.result === 1){
									vm.totalData = res.data
								} else {
									mui.toast(res.errormsg)
								}
							}
						})
					}
				}
			
			})
		</script>

	</body>

</html>